<template>
  <div class="frank_em_record_dialog">
    <el-dialog v-model="dialogVisible" title="病人电子病历" width="60%" @close="handleClose" :close-on-click-modal="false"
      :destroy-on-close="true">
      <div class="record_box">
        <div class="frank_top">
          <el-descriptions :title="patientRecordBase[0].Name" :column="3" :size="size" :style="blockMargin">
            <el-descriptions-item label="性别">{{ patientRecordBase[0].Sex }}</el-descriptions-item>
            <el-descriptions-item label="VIP" style="overflow: hideen">
              {{ patientRecordBase[0].IsVip == 0 ? "否" : "是" }}
            </el-descriptions-item>
            <el-descriptions-item label="人员类型">{{ patientRecordBase[0].PatientType }}</el-descriptions-item>
            <el-descriptions-item label="人员注册码">
              {{ patientRecordBase[0].PersonnelRegistrationCode }}
            </el-descriptions-item>
            <el-descriptions-item label="年龄">{{ patientRecordBase[0].Age }}</el-descriptions-item>
            <el-descriptions-item label="国籍（地区）">{{ patientRecordBase[0].Nationality }}</el-descriptions-item>
            <el-descriptions-item label="民族">{{ patientRecordBase[0].Nation }}</el-descriptions-item>
            <el-descriptions-item label="级别">{{ patientRecordBase[0].IllnessLevel }}</el-descriptions-item>
            <el-descriptions-item label="分配车辆">{{ patientRecordBase[0].AmbName }}</el-descriptions-item>
            <el-descriptions-item label="分配医院">{{ patientRecordBase[0].HospitalName }}</el-descriptions-item>
            <el-descriptions-item label="进度跟踪">{{ patientRecordBase[0].StateName }}</el-descriptions-item>
            <el-descriptions-item label="就诊时间">{{ patientRecordBase[0].SeeADoctorDate }}</el-descriptions-item>
            <el-descriptions-item label="更新时间">{{ patientRecordBase[0].UpdateTime }}</el-descriptions-item>
            <el-descriptions-item label="手机">{{ patientRecordBase[0].Telephone }}</el-descriptions-item>
            <el-descriptions-item label="单位">{{ patientRecordBase[0].Company }}</el-descriptions-item>
            <el-descriptions-item label="职务">{{ patientRecordBase[0].Position }}</el-descriptions-item>
            <el-descriptions-item label="血型">{{ patientRecordBase[0].BloodType }}</el-descriptions-item>
            <el-descriptions-item label="疾病史">{{ patientRecordBase[0].DiseaseKeyword }}</el-descriptions-item>
            <el-descriptions-item label="证件类型">
              {{
                patientRecordBase[0].CertificateType == "CertificatesType-1" ? "中国身份证" :
                patientRecordBase[0].CertificateType == "CertificatesType-2" ? "护照" :
                  patientRecordBase[0].CertificateType == "CertificatesType-3" ? "中国军人身份证" :
                    patientRecordBase[0].CertificateType == "CertificatesType-4" ? "中国武警身份证" :
                      patientRecordBase[0].CertificateType == "CertificatesType-5" ? "台湾居民大陆旅行许可证" :
                        patientRecordBase[0].CertificateType == "CertificatesType-6" ? "香港和澳门居民内地旅行许可证" :
                          "" }}
            </el-descriptions-item>
            <el-descriptions-item label="证件号码">{{ patientRecordBase[0].CertificateCode }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="frank_center">
          <div class="my-tables">
            <el-tabs v-model="activeName" @tab-click="handleClickTab">
              <el-tab-pane label="病史" name="first">
                <el-table :data="illHistoryTable" style="width: 100%" max-height="430" height="430"
                  :row-class-name="tableRowClassName">
                  <el-table-column prop="checkItem" label="" />
                  <el-table-column prop="val" label=""> </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="一般查体" name="second">
                <el-table :data="bodyCheckTable" style="width: 100%" max-height="430" height="430"
                  :row-class-name="tableRowClassName">
                  <el-table-column prop="checkItem" label="检测项" />
                  <el-table-column prop="val" label="" />
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="生命体征" name="seventh">
                <el-table :data="CTTZTable" style="width: 100%" max-height="430" height="430"
                  :row-class-name="tableRowClassName">
                  <el-table-column prop="checkItem" label="检测项" />
                  <el-table-column prop="val" label="" />
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="辅助检查" name="third">
                <el-table :data="auxiliaryExamTable" style="width: 100%" max-height="430" height="430"
                  :row-class-name="tableRowClassName">
                  <el-table-column prop="checkItem" label="检测项" />
                  <el-table-column prop="val" label=""></el-table-column>
                  <el-table-column label="" width="60px">
                    <template #default="scope">
                      <el-button @click="handlePicRow(scope.row)" v-if="scope.row.isPicFlag" type="primary" plain link>
                        查看</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="诊断" name="fourth">
                <el-table :data="diagnosisTable" style="width: 100%" max-height="430" height="430"
                  :row-class-name="tableRowClassName">
                  <el-table-column prop="checkItem" label="诊断项" />
                  <el-table-column prop="val" label="" />
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="处置" name="fifth">
                <el-table :data="dispositionTable" style="width: 100%" max-height="430" height="430"
                  :row-class-name="tableRowClassName">
                  <el-table-column prop="checkItem" label="处置项" />
                  <!-- <el-table-column prop="val" label="" /> -->
                  <el-table-column prop="val" label="">
                    <template #default="scope">
                      <el-button @click="handlePicRowCZ(scope.row)" v-if="scope.row.isPicFlag" type="primary" plain link>
                        查看</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
              <el-tab-pane label="去向" name="sixth">
                <el-table :data="whereaboutsTable" style="width: 100%" max-height="430" height="430"
                  :row-class-name="tableRowClassName">
                  <el-table-column prop="checkItem" label="" />
                  <el-table-column prop="val" label="" />
                </el-table>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
        <div class="frank_bottom">
          <el-card class="box-card">
            <template #header>
              <div class="card-header">
                <span>专家列表</span>
              </div>
            </template>
            <el-table :data="patientTableData" style="width: 100%" max-height="200px">
              <el-table-column prop="name" label="姓名" />
              <el-table-column prop="hospital" label="所在医院" />
              <el-table-column prop="department" label="科室" />
              <el-table-column prop="speciality" label="专长" />
              <el-table-column label="操作">
                <template #default="scope">
                  <el-button size="small" @click="handleEdit(scope.$index, scope.row)" round>推送</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </div>
      </div>
    </el-dialog>
    <el-dialog v-model="imgDialogVisible" align-center width="auto">
      <img w-full :src="dialogImageUrl" alt="Preview Image" style="width: 100%;height: 800px;" />
    </el-dialog>
  </div>
</template>

<script>
import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  ref,
  computed,
  watch,
} from "vue";
import VueEvent from "utils/event";

// 网络
import { GetPatientRecordInfo } from "network/patientRecord";
// 导入自定义类方法
import {
  patientBaseList,
  patientIllInfoList,
  formatTableData,
  diagnosisMDRetu,
  bodyCheckMDRetu,
  CTTZMDRetu,
  dispositionMDRetu,
  illHistoryMDRetu,
  auxiliaryExamMDRetu,
  whereaboutsMDRetu,
} from "../../modelUtils/returnModel";
export default {
  name: "EMRecord",
  components: {},
  props: [],
  setup() {
    const size = ref("");
    const blockMargin = computed(() => {
      const marginMap = {
        large: "32px",
        default: "28px",
        small: "24px",
      };
      return {
        marginTop: marginMap[size.value] || marginMap.default,
      };
    });
    const state = reactive({
      activeName: ref("first"),
      dialogVisible: ref(false),
      row: ref(null),
      patientRecordBase: ref([]),
      illAllInfo: ref(null), //6
      illHistoryInfo: ref(null), //病史
      illHistoryTable: ref([]),
      bodyCheckInfo: ref(null), //体查
      bodyCheckTable: ref([]),
      CTTZTable: ref([]), //体查体征
      auxiliaryExamInfo: ref(null),
      auxiliaryExamTable: ref([]),//辅助检查
      diagnosisInfo: ref(null), //诊断
      diagnosisTable: ref([]),
      dispositionInfo: ref(null), //处置
      dispositionTable: ref([]),
      whereaboutsInfo: ref(null), //去向
      whereaboutsTable: ref([]),
      patientTableData: ref([
        {
          id: 1,
          name: "专家姓名",
          hospital: "医院名",
          department: "科室001",
          speciality: "专长信息",
        }
      ]),
      imgDialogVisible: false,
      dialogImageUrl: ""
    });
    // console.log(dialogVisible);
    const handleClose = () => {
      state.illHistoryTable = [];
      state.bodyCheckTable = [];
      state.CTTZTable = [];
      state.auxiliaryExamTable = [];
      state.dispositionTable = [];
      state.diagnosisTable = [];
      state.whereaboutsTable = [];
      state.dialogVisible = false;
      state.activeName = "first"
    };
    const handleCancel = () => {
      state.illHistoryTable = [];
      state.bodyCheckTable = [];
      state.CTTZTable = [];
      state.auxiliaryExamTable = [];
      state.dispositionTable = [];
      state.diagnosisTable = [];
      state.whereaboutsTable = [];
      state.dialogVisible = false;
    };
    const handleClickTab = (tab, event) => {
      // console.log(tab, event);
    };
    const handleEdit = (index, row) => {
      // console.log(index, row);
    };
    const tableRowClassName = (row, index) => {
      // console.log(row.row.checkItem)
      if (row.row.checkItem == "序号") {
        return "success-row";
      }
      if (row.row.checkItem == "体征序号") {
        return "warning-row";
      }
    };

    const handlePicRow = (row) => {
      // console.log('row  pic', row)
      if (row.isPicFlag == "XDT") {
        state.dialogImageUrl = row.XDTPicture
      } else {
        state.dialogImageUrl = row.XDJHPicture
      }
      state.imgDialogVisible = true
    }
    const handlePicRowCZ = (row) => {
      state.dialogImageUrl = row.JJZLPicture
      state.imgDialogVisible = true
    }
    onBeforeMount(() => {
      VueEvent.on("showDialogEvent", async (data) => {
        // console.log(data);
        // 病例编码
        let patientRecordCode = data.row.PatientRecordCode;
        // 根据病例编码获取病例所有详情数据
        try {
          let patientRecordInfo = await GetPatientRecordInfo({
            PatientRecordCode: patientRecordCode,
          });
          // console.log("病例所有的信息：", patientRecordInfo);
          state.patientRecordBase = patientRecordInfo
          // 病例基础数据格式化
          // state.patientRecordBase = patientBaseList(patientRecordInfo);
          // console.log(state.patientRecordBase)

          // 诊断
          var diagnosis = diagnosisMDRetu(patientRecordInfo[0].TPatientRecordZD);
          if (diagnosis.length > 0) {
            // console.log(diagnosis)
            diagnosis.forEach((item) => {
              for (let i = 0; i < Object.keys(item).length; i++) {
                state.diagnosisTable.push(formatTableData(item, i));
              }
            });
          }
          // // 一般查体
          var bodyCheck = bodyCheckMDRetu(patientRecordInfo[0].TPatientRecordCT.YBCT);
          if (bodyCheck.length > 0) {
            // console.log(bodyCheck);
            bodyCheck.forEach((item) => {
              for (let i = 0; i < Object.keys(item).length; i++) {
                state.bodyCheckTable.push(formatTableData(item, i));
              }
            });
          }
          // // 查体体征
          var CTTZ = CTTZMDRetu(patientRecordInfo[0].TPatientRecordCT.SMTZ);
          if (CTTZ.length > 0) {
            // console.log(CTTZ);
            CTTZ.forEach((item) => {
              for (let i = 0; i < Object.keys(item).length; i++) {
                state.CTTZTable.push(formatTableData(item, i));
              }
            });
          }
          // // 处置
          var disposition = dispositionMDRetu(patientRecordInfo[0].TPatientRecordCZ);
          if (disposition.length > 0) {
            disposition.forEach((item) => {
              for (let i = 0; i < Object.keys(item).length; i++) {
                state.dispositionTable.push(formatTableData(item, i));
              }
            });
          }
          // // 病史
          var illHistory = illHistoryMDRetu(patientRecordInfo[0].TPatientRecordBS,);
          if (illHistory.length > 0) {
            illHistory.forEach((item) => {
              for (let i = 0; i < Object.keys(item).length; i++) {
                state.illHistoryTable.push(formatTableData(item, i));
              }
            });
          }
          // // 辅助检查
          // console.log('patientRecordInfo[0]', patientRecordInfo[0])
          var auxiliaryExam = auxiliaryExamMDRetu(patientRecordInfo[0].TPatientRecordFZJC);
          // console.log('auxiliaryExam', auxiliaryExam)
          if (auxiliaryExam.length > 0) {
            auxiliaryExam.forEach((item) => {
              for (let i = 0; i < Object.keys(item).length; i++) {
                // console.log('Object.keys(item)', Object.keys(item))
                if (Object.keys(item)[i] != "XDTPicture" && Object.keys(item)[i] != "XDJHPicture")
                  state.auxiliaryExamTable.push(formatTableData(item, i));
              }
              // console.log('state.auxiliaryExamTable', state.auxiliaryExamTable)
            });
          }
          // // 去向
          var whereabouts = whereaboutsMDRetu(patientRecordInfo[0].TPatientRecordQX);
          if (whereabouts.length > 0) {
            whereabouts.forEach((item) => {
              for (let i = 0; i < Object.keys(item).length; i++) {
                state.whereaboutsTable.push(formatTableData(item, i));
              }
            });
          }
        } catch (error) {
          throw error;
        }

        // //显示弹窗
        state.dialogVisible = data.isShowDialog;
      });
    });
    onMounted(() => {
      VueEvent.on("closeAllEM", (res) => {
        state.dialogVisible = res;
      });
    });
    const refState = toRefs(state);
    return {
      // 状态
      ...refState,
      blockMargin,
      size,
      // 事件
      handleClose,
      handleCancel,
      handleClickTab,
      tableRowClassName,
      handlePicRow,
      handlePicRowCZ
    };
  },
};
</script>
<style scoped>
:deep(.el-tabs__nav) {
  margin-left: 10px;
}

/* 弹窗距离顶部的距离 */
:deep(.el-dialog) {
  --el-dialog-margin-top: 70px;
}

/* 弹窗header关闭按钮样式 */
:deep(.el-dialog .el-dialog__header) {
  padding: 5px;
  height: 27px;
  line-height: 27px;
  font-size: 10px;
  background: #758bfd;
}

:deep(.el-dialog__headerbtn) {
  top: 0;
  width: 20px;
  height: 27px;
  background: #758bfd;
}

:deep(.el-dialog__headerbtn .el-dialog__close) {
  color: #fff;
}

:deep(.el-dialog__headerbtn .el-dialog__close):hover {
  color: red;
}

.frank_em_record_dialog .record_box {
  height: auto;
}

.record_box .frank_top {
  /* height: 200px; */
  background: #f3f6fc;
}

.record_box .frank_center {
  height: auto;
  margin-top: 10px;
  background: #f3f6fc;
}

.record_box .frank_bottom {
  height: 280px;
  margin-top: 10px;
  display: none;
}

/* top */

.el-descriptions {
  margin-top: 5px !important;
  margin: 10px;
}

:deep(.el-descriptions__body) {
  background: #f3f6fc;
}

/* center */

/* bottom */
.frank_bottom .box-card {
  height: 100%;
}

:deep(.frank_bottom .el-table th.el-table__cell) {
  background: #e0e1e3;
}

:deep(.frank_bottom .el-card__header) {
  padding: 8px;
  font-weight: bold;
  font-size: 14px;
}

:deep(.el-table .success-row) {
  --el-table-tr-bg-color: var(--el-color-primary-light-7);
}

:deep(.el-table .warning-row) {
  --el-table-tr-bg-color: var(--el-color-primary-light-9);
}
</style>